<template>
	<view>
		<view class="scrolling-text">
			<text :style="`font-size:${props.size};color:${props.color};`">{{props.text}}</text>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		size: {
			default: '14px',
			type:String
		},
		text: {
			default: '',
			type: String
		},
		color: {
			default: '#000',
			type: String
		}
	})
</script>

<style scoped>
	.scrolling-text {
		overflow: hidden;
		white-space: nowrap;
		animation: scroll 4s linear infinite;
	}

	@keyframes scroll {
		0% {
			transform: translateX(100%);
		}

		100% {
			transform: translateX(-100%);
		}
	}
</style>